<template>
  <section class="chart-container">
    <div class="c_header systemManage">
      <div class="content">
        <div class="main-content">
          <div>
            <div class="cont">
              <div class="text" style="font-zie:14px;float:left">

                <select v-model="nowDaimaTypeId" style="border:1px solid #ccc;clear:both;margin-right:20px">
                  <option value="">请选择</option>
                  <option v-for="item in daimaTypeList" :key="item.id" :value="item.hash.typeid">
                    {{item.hash.typename}}
                  </option>
                </select>
                <span>上级代码:
                  <b v-if="this.suplist.code_id!==''&&this.suplist.code_name!=''">{{this.suplist.code_id}} {{this.suplist.code_name}}</b>
                  <b v-else>暂无上级代码</b>
                </span>
              </div>
              <div class="btn-group" style="float:right">
                <el-button size="mini" type="primary" @click="addNewDaimaClick">增加同级代码</el-button>
                <el-button size="mini" type="primary" @click="getDaimaInfoList(suplist.sup_code_id)" v-if="this.suplist.code_id!=''">向上</el-button>


              </div>
              <table width="100%" style="background:#fff">
                <thead>
                  <tr>
                    <th>序号</th>
                    <th>代码</th>
                    <th>名称</th>
                    <th>参数</th>
                    <th>备注</th>
                    <th>状态</th>
                    <th width="320px">操作</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(item, index) in daimaList" :key="item.id">
                    <td>{{index+1}}</td>
                    <td>{{item.hash.code_id}}</td>
                    <td>{{item.hash.code_name}}</td>
                    <td>{{item.hash.code_value}}</td>
                    <td>{{item.hash.remark}}</td>
                    <td>
                      <span v-if="item.hash.active=='1'">启用</span>
                      <span v-if="item.hash.active=='0'">停用</span>
                    </td>
                    <td>
                      <span @click="getDaimaInfoList(item.hash.code_id)">查看下级代码</span>
                      <span @click="modifyDaimaClick(item.hash.code_id)">修改</span>
                      <span @click="deleteDaima(item.hash.code_id)">删除</span>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="6" v-if="daimaList.length==0">暂无数据</td>
                  </tr>
                </tbody>
              </table>
            </div>
            <el-dialog :visible.sync="dialogTableVisible3" title="代码管理">
              <div class="addInfo">
                <div class="title">{{dmtitle}}</div>
                <table width="95%">
                  <tbody>
                    <tr>
                      <td>代码类别:</td>
                      <td>{{nowDaimaTypeId}}</td>
                    </tr>

                    <tr>
                      <td>状态:</td>
                      <td>
                        <input type="radio" id="one" value="1"
                          v-model="newDaimastatus"
                        >
                        <label for="one">启用</label>
                        <input type="radio" id="two" value="0"
                          v-model="newDaimastatus"
                        >
                        <label for="two">停用</label>
                      </td>
                    </tr>
                    <tr>
                      <td>上级代码:</td>
                      <td v-if="this.suplist.code_name==''&&this.suplist.code_id==''"><input type="text" value="暂无上级代码" readonly></td>
                      <td v-else><input type="text" :value="this.suplist.code_id+'--'+this.suplist.code_name" disabled></td>

                    </tr>
                    <tr>
                      <td>代码:</td>
                      <td><input type="text" v-model="newDaimaId" :disabled="dmtitle=='修改代码'"></td>
                    </tr>
                    <tr>
                      <td>代码名称:</td>
                      <td><input type="text" v-model="newDaimaName"></td>
                    </tr>
                    <tr>
                      <td>代码参数:</td>
                      <td><input type="text" v-model="newDaimaNumber"></td>
                    </tr>
                    <tr>
                      <td>备注:</td>
                      <td><input type="text" v-model="remark"></td>
                    </tr>
                    <tr>
                      <td colspan="2" @click="addNewDaimaSubmit"><span>提交</span></td>

                    </tr>
                  </tbody>
                </table>
              </div>
            </el-dialog>

          </div>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
export default {
  data() {
    return {
      dialogTableVisible3: false,
      dialogTableVisible4: false,
      sideMenu: [],
      dmtitle: '新增代码',
      isRouterAlive: true,
      RoleRids: [],
      change: '用户列表',
      showTitle: '',
      remark: '',
      ts: this.newStore(),
      // 代码管理相关
      suplist: {
        code_id: '',
        code_name: '',
      },
      daimaList: [], // 代码信息列表
      daimaList1: [],
      daimaTypeList: [], // 代码类型列表
      oneDaimaInfo: [], // 单条代码信息
      nowDaimaTypeId: '', // 当前的代码类型id
      nowDaimaId: '', // 当前代码id
      oldDaimaId: '',
      listLen: 0, // 数据长度
      newDaimaId: '',
      newDaimaName: '',
      newDaimaNumber: '',
      newDaimastatus: '1',
    };
  },
  created() {
    // this.getSidemenu();
    this.getDaimaTypeList();
  },
  watch: {
    // 切换不同的代码类型
    nowDaimaTypeId() {
      this.getDaimaInfoList('');
    },
  },
  methods: {
    getSidemenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B078C37EB4CBA2359',
        token: localStorage.getItem('token'),
        supid: '200300',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sideMenu = ts.d.data.operation1;
      });
    },
    // 代码管理
    // 点击增加同级代码按钮
    addNewDaimaClick() {
      this.dmtitle = '新增代码';
      this.dialogTableVisible3 = true;
      this.remark = '';
      this.newDaimaId = '';
      this.newDaimaName = '';
      this.newDaimaNumber = '';
      this.newDaimastatus = '1';
      this.listLen = '1';
    },

    // 首级点击提交新增代码按钮
    addNewDaimaSubmit() {
      if (this.nowDaimaTypeId.length < 1) {
        alert('请选择代码类型！');
        return;
      }
      if (this.newDaimaId.length < 1) {
        alert('请输入代码！');
        return;
      }
      if (this.newDaimaId == '1') {
        alert('代码不能为 1 ！');
        return;
      }

      if (this.newDaimaName.length < 1) {
        alert('请输入代码名称！');
        return;
      }
      let req;
      if (this.listLen == '1') {
        req = {
          handle: '67A5B6FEF17D97DE8AD68148755261CA149212CB3AA81C34',
          token: localStorage.getItem('token'),
          codetype: this.nowDaimaTypeId,
          code_id: this.newDaimaId,
          sup_code_id: this.suplist.code_id,
          code_name: this.newDaimaName,
          active: this.newDaimastatus,
          code_value: this.newDaimaNumber,
          prop_a: '',
          remark: this.remark,
          '': 'ordernumber',
        };
      } else {
        req = {
          handle: '67A5B6FEF17D97DE0AB0D17168BEEBCD0737D7C4C3E47D60',
          token: localStorage.getItem('token'),
          codetype: this.nowDaimaTypeId,
          code_id: this.newDaimaId,
          active: this.newDaimastatus,
          sup_code_id: this.suplist.code_id,
          code_name: this.newDaimaName,
          code_value: this.newDaimaNumber,
          prop_a: '',
          remark: this.remark,
          '': 'ordernumber',
        };
      }
      this.spost(this.ts, '/mainservlet', req).then(() => {
        // alert('保存成功！');
        this.$message({
          type: 'success',
          message: '保存成功!',
        });
        this.getDaimaInfoList(this.suplist.code_id);
      });
      this.dialogTableVisible3 = false;
    },

    // 删除代码接口
    deleteDaima(codeId) {
      this.$confirm('确认删除?', '', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const res = {
          handle: '67A5B6FEF17D97DEF1D0D23DA4270B63AA4B0A8ECC543C36',
          token: localStorage.getItem('token'),
          sup_code_id: this.suplist.code_id,
          code_id: codeId,
          codetype: this.nowDaimaTypeId,
        };
        this.spost(this.ts, '/mainservlet', res).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
          this.getDaimaInfoList(this.suplist.code_id);
          // this.getDaimaInfoList1();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 点击修改代码按钮
    modifyDaimaClick(codeId) {
      this.dmtitle = '修改代码';
      const req = {
        handle: '67A5B6FEF17D97DE41472B87C055439329C3784058E2FA6F',
        token: localStorage.getItem('token'),
        code_id: codeId,
        codetype: this.nowDaimaTypeId,
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.oneDaimaInfo = ts.d.data.operation1;
        const item = this.oneDaimaInfo[0].hash;
        this.newDaimaId = item.code_id;
        this.remark = item.remark;
        this.newDaimaName = item.code_name;
        this.newDaimaNumber = item.code_value;
        this.newDaimastatus = item.active;
      });
      this.listLen = '0';
      this.dialogTableVisible3 = true;
    },


    // 获取代码类型列表
    getDaimaTypeList() {
      const req = {
        handle: '67A5B6FEF17D97DEADDD1AC49C9AAE0F8C5B6C756017CFB3F6486B1D96ED9F7E',
        token: localStorage.getItem('token'),
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.daimaTypeList = ts.d.data.operation1;
        this.nowDaimaTypeId = this.daimaTypeList[0].hash.typeid;
      });
    },

    // 获取代码信息列表
    getDaimaInfoList(supid) {
      // alert(this.suplist.sup_code_id);
      // if (!supid) {
      // supid = this.suplist.code_id;
      // }
      this.suplist.code_id = '';
      this.suplist.sup_code_id = '';
      this.suplist.code_name = '';
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid,
        codetype: this.nowDaimaTypeId,
        notactive: '-1',
      };
      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.daimaList = ts.d.data.operation1;
        this.suplist = ts.d.data.operation2[0].hash;
        if (!this.suplist.code_id) {
          this.suplist.code_id = '';
          this.suplist.sup_code_id = '';
          this.suplist.code_name = '';
        }
        if (!this.daimaList[0].hash.code_id) {
          this.daimaList = [];
        }
      });
    },
  },
};
</script>
